Styling the First Letter or Line with CSS
CSS provides pseudo-elements ::first-letter and ::first-line to target and style only the first character or the first line of a block of text, allowing for typographic emphasis or decorative effects.
::first-letter– Styles the first character of a block element.- Common uses: Drop caps, larger initial letters, decorative fonts.
::first-line– Styles the first line of a block element.- Common uses: Highlighting the beginning of a paragraph, changing font weight, color, or style.
Using these pseudo-elements, you can emphasize the beginning of text without adding extra HTML elements, keeping your markup semantic and clean.
Use
::first-letterfor decorative initials or typographic emphasis in articles or headings.Use
::first-lineto highlight the opening of paragraphs for readability or stylistic effects.Combine with other text properties like
font-size,font-weight,color,line-heightfor visual impact.Avoid excessive styling that may reduce readability, especially on smaller screens.
Always test pseudo-element styles across different browsers to ensure consistent rendering.